<template>
  <div>
    <div class="notice">
      <a class="title"><span @click="openWin" @click.stop="isShow=true">{{ notice.title }}</span></a>
      <p class="publisher">发布者：{{ notice.publisher }}</p>
      <p class="time">发布时间：{{ notice.time }}</p>
    </div>

    <div class="popWin" v-if="isPopWin" ref="showPanel">
        <div class="title">{{notice.title}}</div>
        <div>
          <div class="publisher">{{notice.publisher}}</div>
          <div class="time">{{notice.time}}</div>
        </div>

      <!-- // pre标签可以识别出换行符 -->
      <pre class="text" style="word-wrap:break-word;">{{notice.text}}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoticeComponents',
  data () {
    return {
      isPopWin: false
    }
  },
  props: {
    notice: Object,
    index: Number
  },
  methods: {
    openWin () {
      this.$emit('closeWin', this.index)
      this.isPopWin = true
    },
    closeWin() {
      this.isPopWin = false
    }
  },
  created () {
    document.addEventListener('click', (e)=> {
      if(this.$refs.showPanel) {
        let isSelf = this.$refs.showPanel.contains(e.target)
        if(!isSelf) {
          this.isPopWin = false
        }
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
  position: relative;
}
.notice {
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  height: 130px;
  background-color: white;
  border-bottom: 2px #e6e6e6 solid;
  border-radius: 5px;
}
.notice .title {
  display: block;
  margin-top: 20px;
  color: #2e7eee;
  font-size: 28px;
}
.notice .title span {
  cursor: pointer;
}
.notice .title span:hover {
  border-bottom: 1px #2e7eee solid;
}
.notice .publisher {
  margin-top: 30px;
  font-size: 14px;
  color: #a2a2b0;
}
.notice .time {
  margin-top: 10px;
  font-size: 14px;
  color: #a2a2b0;
}

.popWin {
  position: fixed;
  z-index: 999;
  width: 568px;
  height: 360px;
  /*border: 1px black solid;*/
  border-radius: 10px;
  overflow: auto;
  left: 620px;
  top: 200px;
  background-color: #ffffff;
  box-shadow: 5px 5px 20px #888888;
}
.popWin .title {
  /*position: fixed;*/
  height: 40px;
  line-height: 40px;
  width: 560px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
}
.popWin div .publisher, .popWin div .time {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 250px;
  color: #a2a2b0;
  font-size: 14px;
}
.popWin div .publisher {
  padding-right: 20px;
  text-align: right;
}
.popWin div .time {
  padding-left: 20px;
  text-align: left;
}
.popWin .text {
  padding: 12px;
  line-height: 28px;
  white-space: pre-wrap;
  font-size: 16px;
  border-top: 2px #2e7eee solid;
}

.popWin::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
.popWin::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #c3c3c3;
}
.popWin::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>

